<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="4">
        <h1>{{ title }}</h1>
        <b>今天是{{ today }}</b>
        <p><b>发布时间:</b> <span>{{ info.build }}</span></p>
        <p>
          <!-- <el-tag type="danger">Have a good day!</el-tag> -->
          <el-button type="primary" @click="goTargetByName('file')">
            <svg-icon :icon-class="getIconByName('file')" />
            发票夹管理
          </el-button>
        </p>
      </el-col>
      <el-col :sm="24" :lg="10">
        <el-carousel trigger="click" height="150px" style="border-radius: 10px;">
          <el-carousel-item v-for="(item) in announceList" :key="item" style="border-radius: 10px;">
            <h3 class="small justify-center">
              <el-tooltip class="box-item"
                          effect="dark"
                          :content="item.content"
                          :show-after="1000"
                          raw-content
                          placement="bottom-start">
                <el-button link @click="openAnnounce(item)" style="font-size: 24px;">{{ item.title }}</el-button>
              </el-tooltip>
            </h3>
            <img v-if="item.img" class="box-bg" :src="item.img" alt="" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :sm="24" :lg="10">
        <el-card class="update-log" shadow="hover" body-style="padding: 10px !important;height: 150px;">
          <el-tabs v-model="activeNameNotice" @tab-click="handleTabClick">
            <el-tab-pane label="一上预算编制通知" name="first">
              <template v-slot:label>
                <span>一上预算编制通知</span>
                <el-badge class="mark" type="danger" is-dot :value="notice1List.length" v-show="notice1List.length > 0" />
              </template>
              <div class="body">
                <p v-for="(item,index) in notice1List" :key="index">
                  <i class="el-icon-s-promotion"></i>
                  <el-button type="primary" link @click="openProjectNotice(item, '一上预算编制通知')">
                    {{ item.noticeTitle }}
                  </el-button>
                  <span v-if="item.expireDate">【截止日期：{{ item.expireDate?.substring(0, 10) }}】</span>
                </p>
              </div>
              <div v-if="notice1List.length > 0">
                <el-button type="primary" plain round @click="goTargetByName('budgetOne')" v-if="checkAuthByCode(getCodeByName('budgetOne'))">
                  <svg-icon :icon-class="getIconByName('budgetOne')" />
                  {{ getTitleByName('budgetOne') }}
                </el-button>
              </div>
              <div v-else style="text-align: center;color: #333;font-size: 14px;">暂无通知</div>
            </el-tab-pane>
            <el-tab-pane label="二上预算编制通知" name="second">
              <template v-slot:label>
                <span>二上预算编制通知</span>
                <el-badge class="mark" type="danger" is-dot :value="notice2List.length" v-show="notice2List.length > 0" />
              </template>
              <div class="body">
                <p v-for="(item,index) in notice2List" :key="index">
                  <i class="el-icon-s-promotion"></i>
                  <el-button type="primary" link @click="openProjectNotice(item, '二上预算编制通知')">
                    {{ item.noticeTitle }}
                  </el-button>
                  <span v-if="item.expireDate">【截止日期：{{ item.expireDate?.substring(0, 10) }}】</span>
                </p>
              </div>
              <div v-if="notice2List.length > 0">
                <el-button type="primary" plain round @click="goTargetByName('budgetTwo')" v-if="checkAuthByCode(getCodeByName('budgetTwo'))">
                  <svg-icon :icon-class="getIconByName('budgetTwo')" />
                  {{ getTitleByName('budgetTwo') }}
                </el-button>
              </div>
              <div v-else style="text-align: center;color: #333;font-size: 14px;">暂无通知</div>
            </el-tab-pane>
            <el-tab-pane label="预算调整通知" name="third">
              <template v-slot:label>
                <span>预算调整通知</span>
                <el-badge class="mark" type="danger" is-dot :value="notice3List.length" v-show="notice3List.length > 0" />
              </template>
              <div class="body">
                <p v-for="(item,index) in notice3List" :key="index">
                  <i class="el-icon-s-promotion"></i>
                  <el-button type="primary" link @click="openProjectNotice(item, '预算调整通知')">
                    {{ item.noticeTitle }}
                  </el-button>
                  <span v-if="item.expireDate">【截止日期：{{ item.expireDate?.substring(0, 10) }}】</span>
                </p>
              </div>
              <div v-if="notice3List.length > 0">
                <el-button type="primary" plain round @click="goTargetByName('budgetNew')" v-if="checkAuthByCode(getCodeByName('budgetNew'))">
                  <svg-icon :icon-class="getIconByName('budgetNew')" />
                  {{ getTitleByName('budgetNew') }}
                </el-button>
                <el-button type="primary" plain round @click="goTargetByName('budgetModify')" v-if="checkAuthByCode(getCodeByName('budgetModify'))">
                  <svg-icon :icon-class="getIconByName('budgetModify')" />
                  {{ getTitleByName('budgetModify') }}
                </el-button>
              </div>
              <div v-else style="text-align: center;color: #333;font-size: 14px;">暂无通知</div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 1rem;">
      <el-col :sm="24" :lg="12">
        <el-card class="update-log" shadow="never" body-style="padding: 10px !important;height: 210px;">
          <el-tabs v-model="activeNameVisit" @tab-click="handleTabClick">
            <el-tab-pane label="常用功能" name="first">
              <span v-for="(item,index) in userVisitList" style="margin: 0 0.2rem;" :key="index" v-show="checkAuthByCode(getCodeByName(item.name))">
                <el-button plain type="warning" style="margin: 0.15rem;" @click="goTargetByName(item.name)">
                  <svg-icon :icon-class="getIconByName(item.name)" />
                  {{ getTitleByName(item.name) }}
                </el-button>
              </span>
            </el-tab-pane>
            <el-tab-pane label="我的收藏" name="second">
              <span v-for="(item,index) in userFavoriteList" style="margin: 0 0.2rem;" :key="index" v-show="checkAuthByCode(getCodeByName(item.name))">
                <el-button plain type="primary" style="margin: 0.15rem;" @click="goTargetByName(item.name)">
                  <svg-icon :icon-class="getIconByName(item.name)" />
                  {{ getTitleByName(item.name) }}
                </el-button>
              </span>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12">
        <el-card class="update-log" shadow="never" body-style="padding: 10px !important;height: 210px;">
          <el-tabs v-model="activeNameTodo" @tab-click="handleTabClick">
            <el-tab-pane name="first">
              <template v-slot:label>
                <span>审批待办</span>
                <el-badge class="mark" type="danger" :max="badgeMaxValue" :value="approveOrderTobeCount" :show-zero="false" />
              </template>
              <div class="body">
                <p v-for="(item,index) in approveOrderTobeList" :key="index">
                  <DateTag :timestamp="item.updateTime" :style="'margin-right: 10px;'" />
                  <el-tooltip :content="item.approveOrderTobeContent">
                    <el-button type="primary" link @click="toApprove(item)" v-if="checkAuthByCode('')">
                      {{ item.approveOrderTobeContent }}
                    </el-button>
                  </el-tooltip>
                </p>
                <div style="text-align: center;color: #555;font-size: 14px;" v-if="approveOrderTobeCount === 0">您已经处理完所有待办了！</div>
                <p v-if="approveOrderTobeCount > 0">
                  <el-tooltip content="查看更多">
                    <el-button type="primary" link @click="toApproveMore()" v-if="checkAuthByCode(getCodeByName('approveOrderTobe'))">......</el-button>
                  </el-tooltip>
                </p>
              </div>
            </el-tab-pane>
            <el-tab-pane name="second">
              <template v-slot:label>
                <span>待阅</span>
                <el-badge class="mark" type="info" :max="badgeMaxValue" :value="approveOrderToviewCount" :show-zero="false" />
              </template>
              <div class="body">
                <p v-for="(item,index) in approveOrderToviewList" :key="index">
                  <DateTag :timestamp="item.updateTime" :style="'margin-right: 10px;'" />
                  <el-tooltip :content="item.approveOrderTobeContent">
                    <el-button type="primary" link @click="toView(item)" v-if="checkAuthByCode('')">
                      {{ item.approveOrderTobeContent }}
                    </el-button>
                  </el-tooltip>
                </p>
                <p v-if="approveOrderToviewCount > 5">
                  <el-tooltip content="查看更多">
                    <el-button type="primary" link @click="toViewMore()" v-if="checkAuthByCode(getCodeByName('approveOrderTobe'))">......</el-button>
                  </el-tooltip>
                </p>
                <div style="text-align: center;color: #555;font-size: 14px;" v-if="approveOrderToviewCount === 0">暂无待阅</div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 1rem;">
      <el-col :xs="24" :sm="24" :md="12" :lg="15">
        <el-card class="update-log" shadow="never" body-style="padding: 10px !important;height: 284px;">
          <el-tabs v-model="activeNameFavorite" @tab-click="handleTabClick">
            <el-tab-pane label="我的提交" name="first">
              <template v-slot:label>
                <span>我的提交</span>
                <el-badge class="mark" type="warning" :max="badgeMaxValue" :value="userSubmitCount" :show-zero="false" />
              </template>
              <div class="body">
                <p v-for="(item,index) in userSubmitList" :key="index">
                  <DateTag :timestamp="item.updateTime" :style="'margin-right: 10px;'" />
                  <EnumTag :enum-list="getEnumList('ApproveOrderBusinessType')" :enum-key="item.businessType" />
                  <el-tooltip :content="`${item.approveOrderCode} - ${item.approveOrderName}`">
                    <el-button type="primary" link @click="toApprove(item)" v-if="checkAuthByCode('')">
                      {{ item.approveOrderCode }} - {{ item.approveOrderName }}
                    </el-button>
                  </el-tooltip>
                  <EnumTag :enum-list="getEnumList('ApproveOrderState')" :enum-key="item.state" />
                </p>
                <div style="text-align: center;color: #555;font-size: 14px;" v-if="userSubmitCount === 0">没有提交的单据！</div>
                <p v-if="userSubmitCount > 0">
                  <el-tooltip content="查看更多">
                    <el-button type="primary" link @click="toApproveMore()" v-if="checkAuthByCode(getCodeByName('userSubmit'))">......</el-button>
                  </el-tooltip>
                </p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的已办" name="second">
              <template v-slot:label>
                <span>我的已办</span>
                <el-badge class="mark" type="warning" :max="badgeMaxValue" :value="userDidCount" :show-zero="false" />
              </template>
              <div class="body">
                <p v-for="(item,index) in userDidList" :key="index">
                  <DateTag :timestamp="item.updateTime" :style="'margin-right: 10px;'" />
                  <EnumTag :enum-list="getEnumList('ApproveOrderBusinessType')" :enum-key="item.businessType" />
                  <el-tooltip :content="`${item.approveOrderCode} - ${item.approveOrderName}`">
                    <el-button type="primary" link @click="toApprove(item)" v-if="checkAuthByCode('')">
                      {{ item.approveOrderCode }} - {{ item.approveOrderName }}
                    </el-button>
                  </el-tooltip>
                  <EnumTag :enum-list="getEnumList('ApproveOrderOperType')" :enum-key="item.approveOrderOperType"
                           v-if="['3'].includes(item.approveOrderOperType)" />
                  <EnumTag :enum-list="getEnumList('ApproveResult')" :enum-key="item.approveResult"
                           v-if="['2'].includes(item.approveOrderOperType)" />
                </p>
                <div style="text-align: center;color: #555;font-size: 14px;" v-if="userDidCount === 0">没有已办的单据！</div>
                <p v-if="userDidCount > 0">
                  <el-tooltip content="查看更多">
                    <el-button type="primary" link @click="toApproveMore()" v-if="checkAuthByCode(getCodeByName('userDid'))">......</el-button>
                  </el-tooltip>
                </p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="9">
        <el-card class="update-log" header="项目库" shadow="never" style="height: 284px;">
          <el-collapse accordion>
            <el-collapse-item title="备选库" v-if="checkAuthByCode(getCodeByName('alternativeLibrary'))">
              <ol>
                <li v-for="(item,index) in libraryAlternativeList" :key="index">
                  {{ item.code }} - {{ item.name }}
                </li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="建设库" v-if="checkAuthByCode(getCodeByName('constructionLibrary'))">
              <ol>
                <li v-for="(item,index) in libraryConstructionList" :key="index">
                  {{ item.code }} - {{ item.name }}
                </li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="执行库" v-if="checkAuthByCode(getCodeByName('executeLibrary'))">
              <ol>
                <li v-for="(item,index) in libraryExecutionList" :key="index">
                  {{ item.code }} - {{ item.name }}
                </li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="完结库" v-if="checkAuthByCode(getCodeByName('completeLibrary'))">
              <ol>
                <li v-for="(item,index) in libraryCompleteList" :key="index">
                  {{ item.code }} - {{ item.name }}
                </li>
              </ol>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog v-model="dialogAnnounceVisible" title="公告" width="70%" top="2vh">
      <announcePreview v-model:announceId="announceId"></announcePreview>
    </el-dialog>
    <el-dialog v-model="dialogProjectNoticeVisible" :title="dialogProjectNoticeTitle" width="70%" top="2vh">
      <projectNoticePreview v-model:projectNoticeId="projectNoticeId"></projectNoticePreview>
    </el-dialog>
  </div>
</template>

<script>
import baseConfig from "@/mixins/baseConfig";
import {doGet, doPost} from "@/config/http";
import {ref} from "vue";
import {approveOrderBusinessTypes} from "@/config/common";
import announcePreview from "@/views/components/base/announcePreview"
import projectNoticePreview from "@/views/components/budget/projectNoticePreview"
import {getUserId} from "@/config/cookie";
import {parseTime} from "@/utils/ruoyi"
import settings from "@/settings";
import {svc} from "@/config/common";

export default {
  name: 'index',
  mixins: [baseConfig],
  components: {
    projectNoticePreview,
    announcePreview,
  },
  data() {
    return {
      svc: 'icims-api',
      info: {},
      version: ref('1.0.0'),
      today: parseTime(new Date().getTime(), '{y}年{m}月{d}日 星期{a}'),//new Date().pattern("yyyy年MM月dd日"),
      notice1List: [],
      notice2List: [],
      notice3List: [],
      approveOrderTobeList: [],
      approveOrderTobeCount: 0,
      approveOrderToviewList: [],
      approveOrderToviewCount: 0,
      userSubmitList: [],
      userSubmitCount: 0,
      userDidList: [],
      userDidCount: 0,
      announceList: [],
      userVisitList: [],
      userFavoriteList: [],
      libraryAlternativeList: [],
      libraryConstructionList: [],
      libraryExecutionList: [],
      libraryCompleteList: [],
      dialogAnnounceVisible: false,
      announceId: null,
      dialogProjectNoticeVisible: false,
      dialogProjectNoticeTitle: '',
      projectNoticeId: null,
      activeNameVisit: 'first',
      activeNameFavorite: 'first',
      activeNameFunction: 'first',
      activeNameNotice: 'first',
      activeNameTodo: 'first',
      badgeMaxValue: 999,
    }
  },
  computed: {
    title() {
      return settings.title
    },
  },
  created() {
    this.initList()
  },
  methods: {
    approveOrderBusinessTypes,
    async initList() {
      let currentUserId = getUserId()
      this.info = await doGet(svc, '/common/info', {}, false)
      let p1 = doGet(svc, '/budget-project-notice/page', {expireDateStart: parseTime(new Date().getTime(), '{y}-{m}-{d}'), publishState: '1', noticeType: '1', pageSize: 1}, false)
      let p2 = doGet(svc, '/budget-project-notice/page', {expireDateStart: parseTime(new Date().getTime(), '{y}-{m}-{d}'), publishState: '1', noticeType: '2', pageSize: 1}, false)
      let p3 = doGet(svc, '/budget-project-notice/page', {expireDateStart: parseTime(new Date().getTime(), '{y}-{m}-{d}'), publishState: '1', noticeType: '3', pageSize: 1}, false)
      let p4 = doGet(svc, '/announce/page', {state: '1', pageSize: 3}, false)
      let p5 = doGet(svc, '/approve-order-tobe/page', {receiveUserId: currentUserId, approveOrderTobeType: "1", state: "1", pageSize: 3}, false)
      let p6 = doGet(svc, '/approve-order-tobe/page', {receiveUserId: currentUserId, approveOrderTobeType: "2", state: "1", pageSize: 3}, false)
      let p7 = doGet(svc, '/budget-project-two/page', {pageSize: 10, libraryState: '0'}, false)
      let p8 = doGet(svc, '/budget-project-two/page', {pageSize: 10, libraryState: '1'}, false)
      let p9 = doGet(svc, '/budget-project-two/page', {pageSize: 10, libraryState: '2'}, false)
      let p10 = doGet(svc, '/budget-project-two/page', {pageSize: 10, libraryState: '3'}, false)
      let p11 = doGet(svc, '/user-visit/page', {pageSize: 15, userId: getUserId(), sortField: 'click', sortType: 'desc'}, false)
      let p12 = doGet(svc, '/user-favorite/page', {pageSize: 15, userId: getUserId(), sortField: 'id', sortType: 'desc'}, false)
      let p13 = doGet(svc, '/approve-order/page', {submitUserId: currentUserId, pageSize: 5}, false)
      let p14 = doGet(svc, '/approve-order-oper/page', {currentApproveUserId: currentUserId, approveOrderOperType: '2,3', pageSize: 5}, false)
      let resArray = await Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14])
      this.notice1List = resArray[0]['records']
      this.notice2List = resArray[1]['records']
      this.notice3List = resArray[2]['records']
      this.announceList = resArray[3]['records']
      this.approveOrderTobeList = resArray[4]['records']
      this.approveOrderTobeCount = parseInt(resArray[4]['total'])
      this.approveOrderToviewList = resArray[5]['records']
      this.approveOrderToviewCount = parseInt(resArray[5]['total'])
      this.libraryAlternativeList = resArray[6]['records']
      this.libraryConstructionList = resArray[7]['records']
      this.libraryExecutionList = resArray[8]['records']
      this.libraryCompleteList = resArray[9]['records']
      this.userVisitList = resArray[10]['records']
      this.userFavoriteList = resArray[11]['records']
      this.userSubmitList = resArray[12]['records']
      this.userSubmitCount = parseInt(resArray[12]['total'])
      this.userDidList = resArray[13]['records']
      this.userDidCount = parseInt(resArray[13]['total'])
      if (this.announceList) {
        this.announceList.map(item => {
          setTimeout(() => {
            this.setImg(item)
          })
        })
      }
    },
    async setImg(obj) {
      if (obj.attachmentId) {
        let res = await doGet(svc, `/customAttachment/preview/${obj.attachmentId}`, {}, false)
        obj.img = 'data:image/gif;base64,' + res
      }
    },
    openAnnounce(item) {
      this.announceId = item.id
      this.dialogAnnounceVisible = true
    },
    openProjectNotice(item, title) {
      this.projectNoticeId = item.id
      this.dialogProjectNoticeTitle = title
      this.dialogProjectNoticeVisible = true
    },
    toApprove(item) {
      this.goTargetByName('approveOrderForm', {id: item.approveOrderId})
    },
    toApproveMore() {
      this.goTargetByName('approveOrderTobe', {approveOrderTobeType: '1', state: '1'})
    },
    toView(item) {
      doPost(svc, `/customApprove/readApproveTobe/${item.id}`, {}, false)
      doGet(svc, `/approve-order/${item.approveOrderId}`, {}, false).then(res => {
        if (res) {
          switch (res['businessType']) {
            case approveOrderBusinessTypes().budgetProjectTwo:
              this.goTargetByName('projectTwoEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().budgetOne:
              this.goTargetByName('budgetOneEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().budgetTwo:
              this.goTargetByName('budgetTwoEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().budgetNew:
              // TODO
              break
            case approveOrderBusinessTypes().budgetAdjust:
              // TODO
              break
            case approveOrderBusinessTypes().expenditureKpi:
              this.goTargetByName('expenditureKpiEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().expenditureQuota:
              this.goTargetByName('expenditureQuotaEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().expenditureAdjustment:
              this.goTargetByName('expenditureAdjustmentEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().expenditureApplication:
              this.goTargetByName('expenditureApplicationEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().expenditureReimbursement:
              this.goTargetByName('expenditureReimbursementEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().expenditureReimbursementOther:
              this.goTargetByName('expenditureReimbursementOtherEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().contractInitial:
              this.goTargetByName('contractInitialEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().contractMain:
              this.goTargetByName('contractMainEdit', {id: res['businessId'], oper: 'view'})
              break
            case approveOrderBusinessTypes().contractSupplemental:break
            case approveOrderBusinessTypes().contractChange:break
            case approveOrderBusinessTypes().contractCash:break
            case approveOrderBusinessTypes().contractBorrow:break
            case approveOrderBusinessTypes().contractChecking:break
            case approveOrderBusinessTypes().contractInterrupt:break
            case approveOrderBusinessTypes().contractTerminate:break
          }
        }
      })
    },
    toViewMore() {
      this.goTargetByName('approveOrderTobe', {approveOrderTobeType: '2', state: '1'})
    },
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
  },
}
</script>

<style>
.mark {
  margin-top: 0;
  margin-right: 0;
  top: -5px;
}
.box-bg {
  width: 100%;
  height: inherit;
  position: absolute;
  top: 0;
  z-index: -1;
}
.box-bg::before {
  content: "";
  position: absolute; /* 一定要用绝对定位 */
  width: 100%;
  height: inherit;
  filter: blur(30px); /* 模糊半径 */
}
</style>
<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

